<template>
	<view class="">
		<view class="container" @click="show = false">
			<view class="list">
				<view class="item" style="border-bottom: 1px solid #d1d1d6; padding-bottom: 20rpx">
					<view class="t">大区名称</view>
					<view class="b">
						<uni-data-select  align='right' :disabled="info.type == 'handle' ? false : true" :clear="false" v-model="info.gameZone" :localdata="range"></uni-data-select>
					</view>
				</view>
				<view class="item" style="border-bottom: 1px solid #d1d1d6; padding-bottom: 20rpx">
					<view class="t">角色ID</view>
					<view class="b">
						<input :disabled="info.type == 'handle' ? false : true" type="text" v-model="info.account" placeholder="请输入" placeholder-class="pclass1" />
					</view>
				</view>
				<view class="item" style="border-bottom: 1px solid #d1d1d6; padding-bottom: 20rpx">
					<view class="t">微信号</view>
					<view class="b">
						<input :disabled="info.type == 'handle' ? false : true" type="text" v-model="info.wechat" placeholder="请输入" placeholder-class="pclass1" />
					</view>
				</view>
				<view class="item">
					<view class="t">手机号</view>
					<view class="b">
						<input
							maxlength="11"
							:disabled="info.type == 'handle' ? false : true"
							type="number"
							v-model="info.phone"
							placeholder="请输入"
							placeholder-class="pclass1"
						/>
					</view>
				</view>
			</view>
		</view>
		<view class="footer_btn" v-if="info.type == 'handle'">
			<view class="cont">
				<view class="btn" @click="submit" :class="{ on: isOn }">确认</view>
			</view>
		</view>
	</view>
</template>

<script>
import { zoneallList, setAddress } from '@/common/http.api.js';
export default {
	data() {
		return {
			info: {},
			range: []
		};
	},
	computed: {
		isOn() {
			return this.info.gameZone == null || '' || this.info.account == null || '' || this.info.wechat == null || '';
		}
	},
	onLoad(option) {
		this.info = JSON.parse(decodeURIComponent(option.obj));
		console.log(this.info);
		zoneallList().then((res) => {
			this.range = res.data.list.map((i) => ({
				text: i.name,
				value: i.name
			}));
		});
	},
	methods: {
		submit() {
			if (this.isOn) {
				this.$modal.msg('请完整填写信息');
				return;
			}
			setAddress(this.info).then((res) => {
				if (res.code == 200) {
					this.$modal.msg('完成填写');
					setTimeout(() => {
						uni.navigateBack();
					}, 500);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.uni-stat__select {
}
.container {
	padding: 30rpx;
	.f-btn {
		position: fixed;
		left: 30rpx;
		right: 30rpx;
		bottom: 30rpx;
		line-height: 100rpx;
		font-size: 32rpx;
		color: #fff;
		height: 100rpx;
		background: linear-gradient(270deg, #ff6f07 0%, #ffa666 100%);
		border-radius: 20rpx;
		opacity: 0.54;
		text-align: center;
	}

	.on {
		opacity: 1;
	}

	.list {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx 30rpx;
		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 20rpx auto;
			.t {
				font-size: 28rpx;
				color: #11192d;
				height: 50rpx;
				line-height: 50rpx;
			}
			.b {
				flex: 1;
				color: #11192d;
				font-size: 28rpx;
				::v-deep .uni-select {
					border: none;
				}
				::v-deep .uni-select__input-text {
					text-align: right;
					font-size: 28rpx;
				}
				input {
					width: 100%;
					height: 60rpx;
					line-height: 60rpx;
					color: #11192d;
					font-size: 28rpx;
					text-align: right;
				}
			}
		}
	}
}
</style>
